import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ID } from '#/api/common';
import type { MenuOption } from '#/api/system/menu';

import { renderIconifyIcon, renderMenuType } from '#/utils/render';

export interface Permission {
  checked: boolean;
  id: ID;
  label: string;
}

export interface MenuPermissionOption extends MenuOption {
  permissions: Permission[];
}

export const nodeOptions = [
  { label: '节点关联', value: true },
  { label: '节点独立', value: false },
];

export const columns: VxeGridProps['columns'] = [
  {
    type: 'checkbox',
    title: '菜单名称',
    field: 'label',
    treeNode: true,
    headerAlign: 'left',
    align: 'left',
    width: 230,
  },
  {
    title: '图标',
    field: 'icon',
    width: 80,
    slots: {
      default: ({ row }) => {
        if (row?.icon === '#') {
          return '';
        }
        return renderIconifyIcon(row.icon);
      },
    },
  },
  {
    title: '类型',
    field: 'menuType',
    width: 80,
    slots: {
      default: ({ row }) => {
        return renderMenuType(row.menuType as 'C' | 'F' | 'M');
      },
    },
  },
  {
    title: '权限标识',
    field: 'permissions',
    headerAlign: 'left',
    align: 'left',
    slots: {
      default: 'permissions',
    },
  },
];
